<template>
    <div class="orderglobal">
        <div class="dditem" v-for="item in slist">
            <div class="ddtop">
                <div>订单时间:{{ item.created_time }}</div>
                <div>订单号:{{ item.no }}</div>
            </div>
            <div style="padding:20px 0px;box-sizing: border-box;">{{ item.goods }}</div>
 <div class="ddtop">
                <div style="color: red;font-weight: bold;">￥{{ item.price }}</div>
                <div v-if="item.status == 'closed'">已关闭</div>

                <div v-if="item.status == 'pendding'">已取消</div>
                <div v-if="item.status == 'finished'">已完成</div>
            </div>
        </div>
        <div style="display: flex;justify-content: center;"><n-pagination v-model:page="page"
                :on-update:page="updatepage" :page-sizes="[limit]" :item-count="count" /></div>

    </div>
</template>
<script setup>
import { NPagination } from 'naive-ui';
onMounted(() => {
    getlist();
})
const page = ref(1);
const slist = ref([]);
const count = ref(0);
const limit=ref(10)
const updatepage = (e) => {
    console.log(e, "e")
    page.value = e
    getlist();
}
const getlist = async () => {
    const { data } = await useHttp("", `/order/list?page=${page.value}&limit=${limit.value}`)
    console.log(data)
    slist.value = data.value.rows
    count.value = data.value.count
    console.log(count)
}
</script>
<style scoped>
.dditem {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;

}

.orderglobal {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
    background: #fff;
}

.ddtop {
    display: flex;
    justify-content: space-between;

}
</style>